<template>
	<view class="root-wrap">
		<view class="list-wrap">
			<u-list
			v-if="dataList.length>0"
				@scrolltolower="scrolltolower"
			>
				<u-list-item
					v-for="(item, index) in dataList"
					:key="index"
				>
					<view class="item">
						<image class="logo" :src="item.bid.bid_image" mode="aspectFill"></image>
						<view class="info">
							<text class="name">{{item.bid.bid_name}}</text>
							<view v-if="item.bid_status=='报价期'" class="status status-0">{{item.bid_status}}</view>
							<view v-if="item.bid_status=='评选期'" class="status status-1">{{item.bid_status}}</view>
							<view v-if="item.bid_status=='中选'" class="status status-2">{{item.bid_status}}</view>
							<view v-if="item.bid_status=='落选'" class="status status-3">{{item.bid_status}}</view>
							<view class="oper-wrap">
								<view class="btn" @click="goDetail(item.bid_id)">查看详情</view>
								<view class="btn" @click="goQuotation(item.bid_id)">查看报价</view>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
			<view v-else class="empty-data">
				<image src="../../static/assets/imgs/page-no-data.png" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import { getMyWinList } from '@/api/program.js';
	export default {
		data() {
			return {
				dataList:[],
				page: 1,
				list_rows: 10,
				noMoreData: false
			};
		},
		onLoad(){
			this.getMyWinList();
		},
		methods:{
			getMyWinList(){
				let that = this;
				const params = {
					page: this.page,
					list_rows: this.list_rows
				}
				getMyWinList(params).then((res)=>{
					if (1 == res.code) {
						that.dataList = [...that.dataList,...res.data.data];	
						that.noMoreData = that.dataList.length>=res.data.total;
					} else {
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			scrolltolower() {
				if(this.noMoreData) return;
				this.page = this.page + 1;
				this.getMyWinList();
			},
			goDetail(id){
				uni.navigateTo({
					url: '/pages/program/detail?id='+id
				})
			},
			goQuotation(id){
				uni.navigateTo({
					url: '/pages/program/quotation?id='+id
				})
			},
		}
	}
</script>

<style lang="scss">
.root-wrap{
	padding-bottom: 100rpx;
	.item{
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 700rpx;
		height: 210rpx;
		padding: 26rpx 24rpx;
		margin: 24rpx auto 0;
		background-color: #F3F4F6;
		border-radius: 8rpx;
		.logo{
			width: 156rpx;
			min-width: 156rpx;
			height: 156rpx;
			margin-right: 28rpx;
			border-radius: 8rpx;
			overflow: hidden;
		}
		.info{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
			height: 156rpx;
			.name{
				font-weight: 500;
				font-size: 32rpx;
				color: #303133;
				line-height: 32rpx;
				text-align: left;
			}
			.status{
				width: 100rpx;
				height: 44rpx;
				font-size: 24rpx;
				color: #F3F4F6;
				text-align: center;
				line-height: 44rpx;
				background-color: #30D6C2;
				border-radius: 22rpx;
			}
			.status-1{
				background-color: #1FA293;
			}
			.status-2{
				background-color: #D1268D;
			}
			.status-3{
				background-color: #616363;
			}
			.oper-wrap{
				.btn{
					display: inline-block;
					font-size: 24rpx;
					color: #909399;
					line-height: 40rpx;
					margin-right: 38rpx;
				}
			}
		}
	}
	.empty-data{
		width: 424rpx;
		height: 424rpx;
		margin:  300rpx auto;
		overflow: hidden;
		image{
			width: 100%;
			height: 100%;
		}
	}
}
</style>
